<template>
    <div>
        <div id="title">
          <div class="left" @click="$router.back()">
              <van-icon id="iconcccon" color="#fff" size="16" name="arrow-left" />
          </div>
          <div class="box1">发布房源</div>
          <div class="box2"></div>
      </div>
      <van-cell-group id="RentOut">
        <van-cell  title="房源信息" />
      </van-cell-group>
      <van-cell  title="小区名称" value="请输入小区的名称" is-link url="/vant/mobile.html" />
      <van-field v-model="valuePrice" label="租金"  placeholder="请输入租金/月" >
        <template #button>
          <span>￥/月</span>
        </template>
      </van-field>
      <van-field v-model="valueMian" label="建筑面积"  placeholder="请输入建筑面积" >
          <template #button>
          <span>㎡</span>
        </template>
      </van-field>

      <van-cell ref="hu" title="户型" :value="value1" is-link @click="addList"></van-cell>
      <van-cell ref="lou" title="所在楼层" :value="value2" is-link @click="addList"></van-cell>
      <van-cell ref="chao" title="朝向" :value="value3" is-link @click="addList"></van-cell>

      <van-popup v-model="Hshow" position="bottom" :style="{ height: '50%' }">
        <van-picker
          :default-index="2"
          :title="namee"
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
        />
      </van-popup>

      <van-popup v-model="Sshow" position="bottom" :style="{ height: '50%' }">
        <van-picker
        :default-index="2"
          :title="namee"
          show-toolbar
          :columns="Scolumns"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
        />
      </van-popup>

      <van-popup v-model="Cshow" position="bottom" :style="{ height: '50%' }">
        <van-picker
        :default-index="2"
          :title="namee"
          show-toolbar
          :columns="Ccolumns"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
        />
      </van-popup> 

      <van-cell-group>
        <van-cell  title="房源标题" />
      </van-cell-group>

      <van-field
        v-model="title"
        rows="1"
        autosize
        type="textarea"
        placeholder="请输入标题（例如：整租 小区名 2室 5000 元）"
      />

      <van-cell-group>
        <van-cell  title="房屋图像" />
      </van-cell-group>
      
      <div class="housePic">
        <van-uploader v-model="fileList" :after-read="afterRead" />
      </div>

      
      <van-cell-group>
        <van-cell  title="房屋配置" />
      </van-cell-group>

      <van-grid @click="fn()" :column-num="5">
          <van-grid-item ref="icon"  @click="click($event)"  icon="send-gift-o" text="洗衣机" />
          <van-grid-item ref="icon"  @click="click($event)"  icon="photo-o" text="空调" />
          <van-grid-item ref="icon"  @click="click($event)"  icon="fire-o" text="天然气" />
          <van-grid-item ref="icon"  @click="click($event)"  icon="video-o" text="电视" />
          <van-grid-item ref="icon"  @click="click($event)"  icon="hot-o" text="热水器" />
          <van-grid-item ref="icon"  @click="click($event)"  icon="points" text="宽带" />
          <van-grid-item ref="icon"  @click="click($event)"  icon="cluster-o" text="暖气" />
          <van-grid-item ref="icon"  @click="click($event)"  icon="qr" text="衣柜" />
          <van-grid-item ref="icon"  @click="click($event)"  icon="eye-o" text="冰箱" />
          <van-grid-item ref="icon"  @click="click($event)"  icon="guide-o" text="沙发" />
     <!-- :class="{iconColorActive: isActive}"
          :class="{iconColorActive: isActive}"
          :class="{iconColorActive: isActive}"
          :class="{iconColorActive: isActive}"
          :class="{iconColorActive: isActive}"
          :class="{iconColorActive: isActive}"
          :class="{iconColorActive: isActive}"
          :class="{iconColorActive: isActive}"
          :class="{iconColorActive: isActive}"
          :class="{iconColorActive: isActive}" -->
      </van-grid>
        <div class="Kong"></div>

      <van-cell-group>
        <van-cell  title="房屋描述" />
      </van-cell-group>

      <van-field
        class="House-text"
        v-model="message"
        rows="1"
        autosize
        type="textarea"
        placeholder="请输入房屋描述信息"
      />
       <div class="Kong2"></div>
        
        <div class="RentOutFooter">
          <div @click="cancelshur" class="left">取消</div>
          <div @click="addHouse" class="right active">确认</div>
        </div>
    </div>
</template>

<script>
// import { Toast } from 'vant';
import Vue from 'vue';
import { Dialog } from 'vant';
import {showHouseApi} from "@/api/FindRoom"
// 全局注册
Vue.use(Dialog);
export default {
    data() {
        return {
          isActive:false,
          arr:["send-gift-o","photo-o","fire-o","video-o","hot-o","points","cluster-o","qr","eye-o","guide-o"],
          arrtext:["洗衣机","空调","天然气","电视","热水器","宽带","暖气","衣柜","冰箱","沙发"],
           fileList: [
              // { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
              // Uploader 根据文件后缀来判断是否为图片文件
              // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
            ],
          message:"",
          value:"",
          valueMian:"",
          valuePrice:"",
          value1:"",
          value2:"",
          value3:"",
          Hshow:false,
          Sshow:false,
          Cshow:false,
          namee:"",
          columns: ['一室', '二室', '三室', '四室', '四室+'],
          Scolumns: ['高楼层', '中楼层', '低楼层',],
          Ccolumns: ['东', '西', '南', '北', '东南','西南','东北','西北','东南','西南'],
          title:"",
        };
    },
    created() {
      // console.log(NaN === NaN);  // false
      // console.log(NaN == NaN);  // false
      // console.log(nall === nall);   // 报错
      // console.log(nall == nall);   // 报错
      // console.log([1,2,3,4,5,6].map(el => {}));   // [undefinde,undefinde,undefinde,undefinde,undefinde,undefinde]
      const obj = {}
       this.$nextTick(()=>{
           const obj = {}
      for(
        const key of {
              name: '张三',
              count:18
            })  {
              obj[key] = key
            }
        console.log(obj);
        })
        
      // console.log(obj.toString + 1);
    },
    mounted() {
     
    },
    methods: {

      click(e){
        console.log(e);
        
        // console.log(e.target.className);
         e.target.classList.add('iconColorActive');
        // if(e.target.classList.includes('iconColorActive'))   {
        //   e.target.classList.remove('iconColorActive');
        // } else {
        //   e.target.classList.add('iconColorActive');
        // }
        // console.log(e);
        // console.log(e.target.offsetParent.innerText);
        // e.target.id='iconColorActive'? e.target.id='': e.target.id='iconColorActive'
      },
      onConfirm(value, index) {
        if (this.columns.includes(value)) {
          this.value1 = value;
          this.Hshow = false;
        }
        if (this.Scolumns.includes(value)) {
          this.value2 = value;
          this.Sshow = false;
        }
        if (this.Ccolumns.includes(value)) {
          this.value3 = value;
        this.Cshow = false;
        }
      },
      onChange(picker, value, index) {
        if (this.columns.includes(value)) {
          this.value1 = value;
        }
        if (this.Scolumns.includes(value)) {
          this.value2 = value;
        }
        if (this.Ccolumns.includes(value)) {
          this.value3 = value;
        }
        // console.log(picker);
        
        // this.value = value;
        // this.namee = value;
        // Toast(`当前值：${value}, 当前索引：${index}`);
      },

      onCancel() {
        // Toast('取消');
        this.Sshow = false;
        this.Hshow = false;
        this.Cshow = false;
      },

      addList (e) {
        // console.log(e.srcElement.offsetParent.innerText);
        const nameHtml = e.srcElement.offsetParent.innerText
        if(nameHtml === "户型") {          
          this.Hshow = true
        } else if (nameHtml === "所在楼层") {
          this.Sshow = true
        } else {
          this.Cshow = true
        }
      },

      async addHouse() {
        const params = {
          title:this.title,
          description:this.message,
          price:this.valuePrice,
          size:this.valueMian,
          floor:this.value2,
        }
        const res = await showHouseApi(params)
        console.log(res);
        

      },


    //  showPopupH() {
    //   this.namee = "户型"
    //   this.Hshow = true;
    //  },
    //  showPopupS() {
    //    this.namee = "所在楼层"
    //    this.Sshow = true;
    //  },
    //  showPopupC(){
    //    this.namee = "朝向"
    //    this.Cshow = true;
    //  },


     cancelshur() {
      Dialog.confirm({
        title: '提示',
        message: '确认放弃发布房源',
        confirmButtonColor: '#21b97a',
        confirmButtonText:"继续编辑",
        cancelButtonText:"放弃编辑"
      })
        .then(() => {
          })
        .catch(() => {
          this.$router.push("/layoutAndaxios/head")
        });
     },
     afterRead(file) {
      console.log(file);
     }
    },
};
</script>

<style scoped >

.iconColorActive {
  color: #21b97a;
}

#RentOut {
  margin-top: 45px;
}
#title {
    width: 100%;
    height: 45px;
    background-color: #21b97a;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}
#title .left {
    flex: 1;
    line-height: 45px;
}
#title #iconcccon {
    margin-left: 16px;
}
#title .box1 {
    text-align: center;
    color: #fff;
    line-height: 45px;
    flex: 1;
}
#title .box2 {
    flex: 1;
}
.housePic {
  width: 100%;
  height: 110px;
  /* line-height: 110px; */
  /* background-color: #21b97a; */
  display: flex;
  align-items: center;
}
.Kong {
  width: 100%;
  height: 20px;
  background-color: #f6f5f6;
}
.House-text {
  height: 150px;
}
.Kong2 {
  width: 100%;
  height: 70px;
  background-color: #f5f5f9;
}
.RentOutFooter {
  z-index: 9;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 45px;
  background-color: #fff;
  display: flex;
}
.RentOutFooter .left {
  color: #21b97a;
  text-align: center;
  line-height: 45px;
  flex: 1;
}
.RentOutFooter .right {
  color: #21b97a;
  text-align: center;
  line-height: 45px;
  flex: 1;
}
.RentOutFooter .active {
  color: #fff;
  background-color: #21b97a;
}
</style>
